<template>
    <div class="home">
        <div class="topBar">
            <van-notice-bar 
            class="topflow"
            scrollable 
            color="#fff" 
            background="#333333"
            mode="link"
            @click="gotoinfo"
            text="公告：APP全新改版 活动福利升级以及最新物流信息。" />   


    
<!-- 头部轮播字+查看汇率 -->
            <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            class="checkHL"
            placement="bottom-start"
              
            >
            <template #reference>
               <p >
                <span>查看汇率</span>&nbsp;&nbsp;
                <van-icon size="15px" class="checkit" name="arrow-down" />
                </p> 
            </template>
            </van-popover>
            
        </div>

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<!-- logo和搜索 -->
<van-sticky>
        <div class="home-head">
          <img src="@/assets/images/logo.jpg" alt="">
          <div class="home-search" @click="gotosearch">
            <div class="search-box">
                <van-icon name="search" size='16px' />
                <span>请输入搜索关键词</span>
            </div>         
          </div>
        </div>
</van-sticky>

<!-- 轮播图 -->
        <van-swipe class="home-swipe" :autoplay="2500" indicator-color="white" v-if="homeData[1]" >
          <van-swipe-item   v-for="(v1,i1) in homeData[1].data" :key="i1" @click="gotogoods">
            <img :src="v1.imgurl" alt="" >
          </van-swipe-item>
        </van-swipe>

<!-- 分类展示模块 -->
        <div class="display">
          <ul class="display-box" v-if="homeData[2]">
            <li v-for="(v2,i2) in homeData[2].data" :key="i2" @click="gotogoods">
              <img :src="v2.imgurl" alt="">
              <p>{{v2.label}}</p>
            </li>
          </ul>
        </div>

 <!-- 分类展示模块2 -->
        <div class="home_main_box">
          <div class="in_home_main_box display2" v-if="homeData[3]">
            <div class="v3img-box" v-for="(v3,i3) in homeData[3].data" :key="i3" @click="gotogoods">
                <img :src="v3.imgurl" alt="">
            </div>
             
          </div>
        </div>

<!-- 精品推荐 -->
          
            <div class="wellGoods">
              <h3>精品推荐</h3>
              <div class="allBrand" v-if="homeData[5]" @click="gotolist">
                <div class="brandBox" v-for="(v5,i5) in homeData[5].data" :key="i5">
                    <img :src="v5.imgurl" alt="">
                </div>
            </div>
        </div>
         
        

<!-- 秒杀 -->
         <div class="wellGoods">
            <h3>秒杀</h3>
        </div>
         <div class="miaoshaGoods">
              <div class="miaoshaBox" v-for="(v7,i7) in MiaoSha" :key="i7" @click="gotomiaoshaodetail(v7.name)">
                <div class="msul" >
                  <div class="msli">
                      <div class="countDown">
                        <van-count-down format="HHH:mm:ss" :time="10800000000" >
                          <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                          </template>
                        </van-count-down>
                      </div>
                      <img class="msimg" :src="v7.image_url" alt="">
                      <p class="countGoodsDtail van-multi-ellipsis--l2">{{v7.name}}</p>
                      <p class="countGoodsPrice">￥ {{v7.cny_price}}</p>
                  </div>
                 </div>
              </div>
              
            </div>

<!-- 热销单品 -->

          <div class="wellGoods">
            <h3>热销单品</h3>
          </div>
          <div class="ban1" v-if="homeData[9]">
            <div class="bimgbox" v-for="(v9,i9) in homeData[9].data" :key="i9">
                <img :src="v9.imgurl" alt="">
            </div> 
          </div>

          <slidecom :slideList="slideList1"></slidecom> 


<!-- 包邮专区 -->

          <div class="wellGoods">
            <h3>包邮专区</h3>
          </div>
          <div class="ban1" v-if="homeData[12]">
            <div class="bimgbox" v-for="(v12,i12) in homeData[12].data" :key="i12">
                <img :src="v12.imgurl" alt="">
            </div> 
          </div>

          <slidecom :slideList='slideList2'></slidecom> 
          

<!-- 热销品牌 -->

          <div class="wellGoods">
            <h3>热销品牌</h3>
          </div>
          <div class="ban1" v-if="homeData[15]">
            <div class="bimgbox " v-for="(v13,i13) in homeData[15].data" :key="i13">
                <img :src="v13.imgurl" alt="">
            </div> 
          </div>

          <!-- <div class="dif-brand-box">
            <div class="dbbox " v-if="homeData[16]">
              <div > 
                   
                  <van-tabs v-model="active" animated type='card' color='#000' swipe-threshold=0>
                    <van-tab v-for="(brand,b) in homeData[16].data" :key="b" :title="brand.category_name">
               
                    </van-tab> 
                 
                  </van-tabs>
              </div>
            </div>  
          </div> -->
          <slidecom :slideList='slideList3_1'></slidecom> 

          
            
           

          


<!-- 香港极速 -->

          <div class="wellGoods">
            <h3>香港极速</h3>
          </div>
          <div class="ban1" v-if="homeData[18]">
            <div class="bimgbox" v-for="(v14,i14) in homeData[18].data" :key="i14">
                <img :src="v14.imgurl" alt="">
            </div> 
          </div>

          <slidecom :slideList='slideList4'></slidecom> 


<!-- 凑单专区 -->

          <div class="wellGoods">
            <h3>凑单专区</h3>
          </div>
          <div class="ban1" v-if="homeData[21]">
            <div class="bimgbox" v-for="(v15,i15) in homeData[21].data" :key="i15">
                <img :src="v15.imgurl" alt="">
            </div> 
          </div>

          <slidecom :slideList='slideList5'></slidecom> 


<!-- 大牌试用 -->

          <div class="wellGoods">
            <h3>大牌试用</h3>
          </div>
          <div class="ban1" v-if="homeData[24]">
            <div class="bimgbox" v-for="(v16,i16) in homeData[24].data" :key="i16">
                <img :src="v16.imgurl" alt="">
            </div> 
          </div>

          <slidecom :slideList='slideList6'></slidecom> 

        
           
       
         </van-pull-refresh> 
        
        
        <Foot></Foot>
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import { ContactList, Toast } from 'vant';
export default {
    data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '1RUB ≈ 0.0903RMB' }],
      num:null,
      active:0,
      list:[],
      isLoading: false,
      // miaosha:[],
      // rexiaodanpin:[],
       
    };
  },
  computed:{
    ...mapState(['MiaoSha','homeData','slideList1','slideList2','slideList3_1','slideList4','slideList5','slideList6','homeDataPlus'])
  },
  methods: {
    ...mapMutations(['setMiaoSha','setHomeDataPlus','setHomeData','setSlideList1','setSlideList2','setSlideList3_1','setSlideList4','setSlideList5','setSlideList6']),
    onSelect(action) {
      Toast(action.text);
    },
    gotoinfo(){
        this.$router.push({name:'information'})
    },
    gotosearch(){
      this.$router.push({name:'search'})
    },
    time(from,to){
      var a=new Date(to).getTime();
      var b=new Date(from).getTime();
    return (a-b)*1000
    },

    pick2(arr){
      var a=[];
      for(var i=0;i<(arr.length/2)+2;i++){
         a.push(arr.splice(0,2))
      }
      return a;
    },

    pick(arr){
      var b = [];
      for(var i=0;i<arr.length;i++){
         b.push(arr[i])
      }
      return b;
    },
    gotogoods(){
      this.$router.push({name:'goodslist'})
    },
     onRefresh() {
       this.$router.go('/')
      // setTimeout(() => {
      //   Toast('刷新成功');
      //   this.isLoading = false;
      // }, 3000);
    },
    gotolist(){
      this.$router.push({name:'list'})
    },
    gotomiaoshaodetail(name){
      // console.log(111)
      this.$router.push({name:'goodsdetail',query:{name:name}})
    },
  

  },

  mounted(){

    if(!this.homeData.length>0){
      this.$ajax.getWruru({
      type: 'homepage'
    }).then(res=>{
      this.setHomeData(res.response_data[0].items)
      // console.log(res)
      
      // this.setSlideList1(this.pick2(res.response_data[0].items[10].data))
      // this.setSlideList2(this.pick2(res.response_data[0].items[13].data))
      // this.setSlideList3_1(this.pick2(res.response_data[0].items[16].data[0].product_data))
      // this.setSlideList4(this.pick2(res.response_data[0].items[19].data))
      // this.setSlideList5(this.pick2(res.response_data[0].items[22].data))
      // this.setSlideList6(this.pick2(res.response_data[0].items[25].data))
      
      this.list=this.pick(res.response_data[0].items[16].data)
      
    })
    }
    
    this.$ajax.getWruruGoodslist().then(res=>{
      let olist =[];
      olist = res.result;
      // this.miaosha=olist.splice(0,2);
      // this.rexiaodanpin=olist.splice(0,6);
      this.setHomeDataPlus(res.result)
      this.setMiaoSha(olist.splice(0,2))

      this.setSlideList1(this.pick2(olist.splice(0,6)))
      this.setSlideList2(this.pick2(olist.splice(0,6)))
      this.setSlideList3_1(this.pick2(olist.splice(0,6)))
      this.setSlideList4(this.pick2(olist.splice(0,6)))
      this.setSlideList5(this.pick2(olist.splice(0,6)))
      this.setSlideList6(this.pick2(olist.splice(0,6)))
        
    })
  },
    
}
</script>




<style lang="scss" scoped>
    .home{
      padding-bottom: 80px;
    }
    .topBar{
        display: flex;
        .topflow{
            width: 60%;
        }
        .checkHL{
            flex: 1;
            height: 40px;
            background-color: #333333;
            color: white;
            line-height: 40px;
            text-align: center;
            .checkit{
              vertical-align: middle;
            }
        }
    }
    .home-head{
      display: flex;
      padding: 24px 6px;
      background-color: #fff;
      box-shadow: 0 0.05rem 0.05rem rgba(0,0,0,.1);
      img{
        width: 45%;
        padding: 12px 0;
      }
      .home-search{
        padding: 10px 12px;
        width: 200px;
        .search-box{
          display: flex;
          align-items: center;
          background-color:#f6f6f6;
          span{
          padding: 5px 8px 5px 0;
          color: #969799;
          font-size: 14px;
        }
        .van-icon-search{
          vertical-align: middle;
        }
        }
        
      }
    }

.home-swipe .van-swipe-item {
    padding: 0 6px;
    height: 181.5px;
    box-sizing: border-box;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #fff;
    img{
      width: 100%;
    }
  }

  .home_main_box{
    width: 100%;
    padding: 6px;
    padding-bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
    .in_home_main_box{
       padding: 6px;
       overflow: hidden;
    }
  }

  .display{
    width: 100%;
    padding: 6px;
    padding-bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
    .display-box{
      padding: 6px;
      // overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      li{
        width: 20%;
        float: left;
        padding: 16px 8px;
        text-align: center;
        img{
          width: 100%;
        }
      }
    }
  }
  .display2{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    .v3img-box{
      // width: 50%;
      padding: 16px 8px;
        img{
              width: 100%;
            }
    }
    
  }
  .wellGoods{
    background-color: #fff;
    
    margin-top: 12px;
    text-align: center;
    font-size: 15px;
    h3{
      padding: 12px 0;
      font-weight:1000;
    }
    
  }
  .allBrand{
    display: flex;
    overflow: auto;
    height: 60px;
    .brandBox{
      padding: 3px 6px;
      margin-left: 6px;
      margin-top: 6px;
      img{
        width: 72px;
        height: 38.4px;
      }
    }

  }
   .colon {
    display: inline-block;
    margin: 0 4px;
    color: #333;
  }
  .block {
    display: inline-block;
    width: 28px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    background-color: #f6cc7e;
  }

  .miaoshaGoods{
    padding-top: 12px;
    overflow: auto;
    display: flex;
    overflow: auto;
    
    .miaoshaBox{
      padding: 12px;
      
      .msul{
            background-color: #fff;
            padding: 6px;
           
       .msli{
         display: flex;
         flex-direction: column;
          justify-content: center;
          align-items: center;
          .msimg{
              display: inline-block;
              width: 151.6px;
              
          }
          p{
            margin-top: 6px;
          }
          .countGoodsDtail{
            font-size: 14px;
            width: 100%;
            // overflow : hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
            
            
    
   
          }
          .countGoodsPrice{
            font-weight: bold;
            font-size: 18px;
            text-align: left;
            width: 100%;
          }
          
        }
      }
    }
    
  }
  .ban1{
    width: 100%;
    img{
      width: 100%;
    }
  }

  .slide-box{
        display: flex;
        flex-direction: row;
        overflow: auto;
      .more{
        height: 100%;
        padding: 6px;
        .morebox{
          padding: 6px;
          background-color: #fff;
          p{
          width: 100px;
          line-height: 493px;
          font-size: 16px;
          text-align: center;
        }
        }
        
      }
      
      .slide-unit-xunhuan{
        width: 163px;
        
          .slide-unit{
            width: 163px;
              .su{
                // width: 100%;
                padding: 6px;
                .sus{
                  background-color: #fff;
                  // width: 100%;
                  padding: 6px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  img{
                    width: 100%;
                  }
                  h6{
                    // height: 38.4px !important;
                    font-size: 15px;
                    color: black;
                    margin-top: 6px;
                  }
                  p{
                    margin-top: 6px;
                    width: 100%;
                  }
                  .susprice1{
                    font-size: 16px;
                    .suss2{
                      color: #b2b2b2;
                      text-decoration: line-through;
                    }
                  }
                  .susprice2{
                    span{
                      font-size: 14px;
                      font-weight: bold;
                      padding: 3px 6px;
                      background-image: linear-gradient(90deg,#fae0a2,#f6cb7c);
                    }
                  }


                }
              }
          }
      }
  }
  .dif-brand-box{
      height: 60px;
      // margin-top: 12px;
      background-color: #fff;
      .dbbox{
        display: flex;
        overflow: auto;
          .dif-brand{
          
          margin-left: 12px;
          border: 1.2px solid black;
          text-align: center;
          white-space:nowrap;
          padding: 3px 6px;
          font-size:  14px;
          // line-height: 20px;
          
      }
      }
     
  }
 
  // .van-tab{
  //   width: 100px;
  // }
 ::v-deep .van-tabs__nav, .van-tabs__nav--card, .van-tabs__nav--complete{
   padding: 0;
   margin-left: 0;
   border: none;
   border-right: 1.2px solid black; 
   
  //  height: 50px;
  }
 ::v-deep .van-tabs, .van-tabs--card{
   padding-top: 12px;
 }
 ::v-deep .van-tab{
   border: 1.2px solid black;
   margin: 0 6px;
 }
</style>